<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>展位模版</h2>
        </template>
      </PageTitle>
      <el-row
        :gutter="10"
        type="flex"
        justify="space-between"
        style="margin-top: 20px"
      >
        <el-col :span="12">
          <el-select placeholder="不限预定状态">
            <el-option
              v-for="item in platform"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-row type="flex">
            <el-col :span="5">
              <el-select placeholder="模版名称">
                <el-option
                  v-for="item in template"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-row type="flex">
                <el-input placeholder="请输入搜索内容"></el-input>
                <el-button type="primary">
                  <i class="el-icon-search"></i>
                </el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        v-loading="downloadLoading"
        ooltip-effect="dark"
        border
        :data="list"
        max-height="500px"
        style="margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed />
        <el-table-column
          label="模版名称"
          align="center"
          width="width"
          prop="title"
          fixed
        />
        <el-table-column
          label="可用状态"
          align="center"
          width="width"
          prop="id"
          fixed
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status ? 'success' : 'danger'">{{
              scope.row.status ? "可用" : "不可用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          width="150"
          align="center"
          fixed="right"
        >
          <template>
            <el-button type="primary" size="small" @click="editBooth">修改</el-button>
            <el-button type="danger" size="small" @click="delBtn">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="8">
          <el-button type="primary" size="small" @click="addBooth">新增</el-button>
          <el-button type="danger" size="small">删除所选</el-button>
        </el-col>
        <el-col :span="16">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="255"
            style="text-align: right"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 3,
          title: "通用，不分展区摊位号",
          area: 'a:1:{i:0;s:1:"A";}',
          position: "a:0:{}",
          position_img: "",
          status: 1,
        },
        {
          id: 2,
          title: "宁波展览中心",
          area: 'a:1:{i:0;s:1:"E";}',
          position:
            'a:1:{s:1:"E";a:34:{i:0;s:3:"E66";i:1;s:3:"E67";i:2;s:3:"E68";i:3;s:3:"E69";i:4;s:3:"E70";i:5;s:3:"E71";i:6;s:3:"E72";i:7;s:3:"E73";i:8;s:3:"E74";i:9;s:3:"E75";i:10;s:3:"E76";i:11;s:3:"E77";i:12;s:3:"E78";i:13;s:3:"E79";i:14;s:3:"E80";i:15;s:3:"E81";i:16;s:3:"E82";i:17;s:3:"E83";i:18;s:3:"E84";i:19;s:3:"E85";i:20;s:3:"E86";i:21;s:3:"E87";i:22;s:3:"E88";i:23;s:3:"E89";i:24;s:3:"E90";i:25;s:3:"E91";i:26;s:3:"E92";i:27;s:3:"E93";i:28;s:3:"E94";i:29;s:3:"E95";i:30;s:3:"E96";i:31;s:3:"E97";i:32;s:3:"E98";i:33;s:3:"E99";}}',
          position_img: "",
          status: 1,
        },
        {
          id: 1,
          title: "北仑人才市场",
          area: 'a:3:{i:0;s:1:"A";i:1;s:1:"B";i:2;s:1:"C";}',
          position:
            'a:3:{s:1:"A";a:33:{i:0;s:2:"A1";i:1;s:2:"A2";i:2;s:2:"A3";i:3;s:2:"A4";i:4;s:2:"A5";i:5;s:2:"A6";i:6;s:2:"A7";i:7;s:2:"A8";i:8;s:2:"A9";i:9;s:3:"A10";i:10;s:3:"A11";i:11;s:3:"A12";i:12;s:3:"A13";i:13;s:3:"A14";i:14;s:3:"A15";i:15;s:3:"A16";i:16;s:3:"A17";i:17;s:3:"A18";i:18;s:3:"A19";i:19;s:3:"A20";i:20;s:3:"A21";i:21;s:3:"A22";i:22;s:3:"A23";i:23;s:3:"A24";i:24;s:3:"A25";i:25;s:3:"A26";i:26;s:3:"A27";i:27;s:3:"A28";i:28;s:3:"A29";i:29;s:3:"A30";i:30;s:3:"A31";i:31;s:3:"A32";i:32;s:3:"A33";}s:1:"B";a:34:{i:0;s:4:"B100";i:1;s:4:"B101";i:2;s:4:"B102";i:3;s:4:"B103";i:4;s:4:"B104";i:5;s:4:"B105";i:6;s:4:"B106";i:7;s:4:"B107";i:8;s:4:"B108";i:9;s:4:"B109";i:10;s:4:"B110";i:11;s:4:"B111";i:12;s:4:"B112";i:13;s:4:"B113";i:14;s:4:"B114";i:15;s:4:"B115";i:16;s:4:"B116";i:17;s:4:"B117";i:18;s:4:"B118";i:19;s:4:"B119";i:20;s:4:"B120";i:21;s:4:"B121";i:22;s:4:"B122";i:23;s:4:"B123";i:24;s:4:"B124";i:25;s:4:"B125";i:26;s:4:"B126";i:27;s:4:"B127";i:28;s:4:"B128";i:29;s:4:"B129";i:30;s:4:"B130";i:31;s:4:"B131";i:32;s:4:"B132";i:33;s:4:"B133";}s:1:"C";a:23:{i:0;s:4:"C200";i:1;s:4:"C201";i:2;s:4:"C202";i:3;s:4:"C203";i:4;s:4:"C204";i:5;s:4:"C205";i:6;s:4:"C206";i:7;s:4:"C207";i:8;s:4:"C208";i:9;s:4:"C209";i:10;s:4:"C210";i:11;s:4:"C211";i:12;s:4:"C212";i:13;s:4:"C213";i:14;s:4:"C214";i:15;s:4:"C215";i:16;s:4:"C216";i:17;s:4:"C217";i:18;s:4:"C218";i:19;s:4:"C219";i:20;s:4:"C220";i:21;s:4:"C221";i:22;s:4:"C222";}}',
          position_img: "",
          status: 1,
        },
      ],
      platform: [
        { id: 1, name: "不限状态" },
        { id: 2, name: "可用" },
        { id: 3, name: "不可用" },
      ],
      template: [{ id: 1, name: "模版名称" }],
    };
  },
  methods: {
    addBooth() {
      this.$router.push({
        name:'addBooth'
      })
    },
    delBtn() {
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    editBooth() {
      this.$router.push({
        name:'editBooth'
      })
    }
  }
};
</script>

<style scoped></style>
